<template>
  <div class="statistics-report-container">
    <div class="page-header">
      <h2 class="page-title">统计报表</h2>
      <div class="header-actions">
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>刷新
        </el-button>
        <el-button type="primary" @click="exportExcel">
          <el-icon><Download /></el-icon>导出Excel
        </el-button>
      </div>
    </div>
    
    <!-- 日期范围选择器 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            :shortcuts="dateShortcuts"
            :disabled-date="disableFutureDate"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="业务类型">
          <el-select v-model="filterForm.businessTypeId" placeholder="请选择业务类型" clearable @change="handleFilterChange">
            <el-option label="全部" :value="null" />
            <el-option 
              v-for="item in businessTypes" 
              :key="item.id" 
              :label="item.name" 
              :value="item.id" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="窗口">
          <el-select v-model="filterForm.windowId" placeholder="请选择窗口" clearable @change="handleFilterChange">
            <el-option label="全部" :value="null" />
            <el-option 
              v-for="item in windows" 
              :key="item.id" 
              :label="item.name" 
              :value="item.id" 
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="statistic-card">
            <div class="card-content">
              <div class="statistic-title">总取号数</div>
              <div class="statistic-value">{{ summaryData.totalTickets }}</div>
              <div class="statistic-comparison" :class="getComparisonClass(summaryData.totalTicketsChange)">
                {{ summaryData.totalTicketsChange > 0 ? '+' : '' }}{{ summaryData.totalTicketsChange }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistic-card">
            <div class="card-content">
              <div class="statistic-title">已完成数</div>
              <div class="statistic-value">{{ summaryData.finishedTickets }}</div>
              <div class="statistic-comparison" :class="getComparisonClass(summaryData.finishedTicketsChange)">
                {{ summaryData.finishedTicketsChange > 0 ? '+' : '' }}{{ summaryData.finishedTicketsChange }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistic-card">
            <div class="card-content">
              <div class="statistic-title">平均等待时间</div>
              <div class="statistic-value">{{ summaryData.avgWaitTime }}分钟</div>
              <div class="statistic-comparison" :class="getComparisonClass(-summaryData.avgWaitTimeChange)">
                {{ summaryData.avgWaitTimeChange > 0 ? '+' : '' }}{{ summaryData.avgWaitTimeChange }}%
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistic-card">
            <div class="card-content">
              <div class="statistic-title">平均处理时间</div>
              <div class="statistic-value">{{ summaryData.avgProcessTime }}分钟</div>
              <div class="statistic-comparison" :class="getComparisonClass(-summaryData.avgProcessTimeChange)">
                {{ summaryData.avgProcessTimeChange > 0 ? '+' : '' }}{{ summaryData.avgProcessTimeChange }}%
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 趋势图表 -->
    <div class="data-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="chart-card">
            <template #header>
              <div class="card-header">
                <span>业务数量趋势</span>
                <el-radio-group v-model="chartTimeUnit" size="small" @change="handleChartUnitChange">
                  <el-radio-button label="day">日</el-radio-button>
                  <el-radio-button label="week">周</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div id="trend-chart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 详细统计表格 -->
    <el-tabs v-model="activeTab" class="report-tabs">
      <el-tab-pane label="业务类型统计" name="businessType">
        <el-card>
          <el-table :data="businessTypeStats" border style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="业务类型" min-width="150" />
            <el-table-column prop="totalTickets" label="取号数" width="100" sortable />
            <el-table-column prop="finishedTickets" label="完成数" width="100" sortable />
            <el-table-column prop="abandonedTickets" label="放弃数" width="100" sortable />
            <el-table-column prop="completionRate" label="完成率" width="100" sortable>
              <template #default="scope">
                {{ scope.row.completionRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="avgWaitTime" label="平均等待时间(分钟)" width="160" sortable />
            <el-table-column prop="avgProcessTime" label="平均处理时间(分钟)" width="160" sortable />
          </el-table>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="窗口统计" name="window">
        <el-card>
          <el-table :data="windowStats" border style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="窗口名称" min-width="150" />
            <el-table-column prop="totalTickets" label="取号数" width="100" sortable />
            <el-table-column prop="finishedTickets" label="完成数" width="100" sortable />
            <el-table-column prop="abandonedTickets" label="放弃数" width="100" sortable />
            <el-table-column prop="completionRate" label="完成率" width="100" sortable>
              <template #default="scope">
                {{ scope.row.completionRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="avgWaitTime" label="平均等待时间(分钟)" width="160" sortable />
            <el-table-column prop="avgProcessTime" label="平均处理时间(分钟)" width="160" sortable />
          </el-table>
        </el-card>
      </el-tab-pane>
      
      <el-tab-pane label="日期统计" name="date">
        <el-card>
          <el-table :data="dateStats" border style="width: 100%" v-loading="loading">
            <el-table-column prop="date" label="日期" width="120" sortable />
            <el-table-column prop="totalTickets" label="取号数" width="100" sortable />
            <el-table-column prop="finishedTickets" label="完成数" width="100" sortable />
            <el-table-column prop="abandonedTickets" label="放弃数" width="100" sortable />
            <el-table-column prop="completionRate" label="完成率" width="100" sortable>
              <template #default="scope">
                {{ scope.row.completionRate }}%
              </template>
            </el-table-column>
            <el-table-column prop="avgWaitTime" label="平均等待时间(分钟)" width="160" sortable />
            <el-table-column prop="avgProcessTime" label="平均处理时间(分钟)" width="160" sortable />
            <el-table-column prop="peakHour" label="高峰时段" width="100" />
          </el-table>
          <div class="pagination-container">
            <el-pagination
              v-model:currentPage="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import { Refresh, Download, Search } from '@element-plus/icons-vue'

export default {
  name: 'StatisticsReport',
  components: {
    Refresh,
    Download,
    Search
  },
  setup() {
    // 图表实例
    let trendChart = null
    
    // 基础数据
    const loading = ref(false)
    const activeTab = ref('businessType')
    const chartTimeUnit = ref('day')
    
    // 获取今天和30天前的日期
    const today = new Date()
    const thirtyDaysAgo = new Date()
    thirtyDaysAgo.setDate(today.getDate() - 30)
    
    // 格式化日期为 YYYY-MM-DD
    const formatDate = (date) => {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
    
    // 过滤表单
    const filterForm = reactive({
      dateRange: [formatDate(thirtyDaysAgo), formatDate(today)],
      businessTypeId: null,
      windowId: null
    })
    
    // 日期快捷选项
    const dateShortcuts = [
      {
        text: '最近一周',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setDate(start.getDate() - 7)
          return [start, end]
        }
      },
      {
        text: '最近一个月',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setMonth(start.getMonth() - 1)
          return [start, end]
        }
      },
      {
        text: '最近三个月',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setMonth(start.getMonth() - 3)
          return [start, end]
        }
      }
    ]
    
    // 禁用未来日期
    const disableFutureDate = (time) => {
      return time.getTime() > Date.now()
    }
    
    // 模拟业务类型数据
    const businessTypes = [
      { id: 1, name: '普通业务', code: 'A' },
      { id: 2, name: '特殊业务', code: 'B' },
      { id: 3, name: '紧急业务', code: 'C' },
      { id: 4, name: '企业业务', code: 'D' },
      { id: 5, name: '临时业务', code: 'E' }
    ]
    
    // 模拟窗口数据
    const windows = [
      { id: 1, name: '综合服务窗口1', number: '01' },
      { id: 2, name: '综合服务窗口2', number: '02' },
      { id: 3, name: '企业服务窗口', number: '03' },
      { id: 4, name: '应急窗口', number: '04' }
    ]
    
    // 分页相关
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
    
    // 生成一个随机的时间序列数据
    const generateTimeSeriesData = (days, baseValue, variance) => {
      const data = []
      const today = new Date()
      
      for (let i = 0; i < days; i++) {
        const date = new Date()
        date.setDate(today.getDate() - days + i + 1)
        
        const value = Math.floor(baseValue + (Math.random() * variance * 2) - variance)
        data.push({
          date: formatDate(date),
          value: Math.max(0, value)
        })
      }
      
      return data
    }
    
    // 生成模拟报表数据
    const generateMockReportData = () => {
      // 总览数据
      const summaryData = {
        totalTickets: Math.floor(Math.random() * 5000) + 3000,
        totalTicketsChange: Math.floor(Math.random() * 20) - 5,
        finishedTickets: 0,
        finishedTicketsChange: Math.floor(Math.random() * 20) - 5,
        avgWaitTime: (Math.random() * 10 + 3).toFixed(1),
        avgWaitTimeChange: Math.floor(Math.random() * 20) - 10,
        avgProcessTime: (Math.random() * 15 + 5).toFixed(1),
        avgProcessTimeChange: Math.floor(Math.random() * 20) - 10,
      }
      
      // 计算完成数
      summaryData.finishedTickets = Math.floor(summaryData.totalTickets * (0.7 + Math.random() * 0.2))
      
      // 业务类型统计
      const businessTypeStats = businessTypes.map(type => {
        const totalTickets = Math.floor(Math.random() * 1000) + 100
        const finishedTickets = Math.floor(totalTickets * (0.6 + Math.random() * 0.3))
        const abandonedTickets = Math.floor((totalTickets - finishedTickets) * Math.random())
        const completionRate = Math.floor((finishedTickets / totalTickets) * 100)
        
        return {
          id: type.id,
          name: type.name,
          code: type.code,
          totalTickets,
          finishedTickets,
          abandonedTickets,
          completionRate,
          avgWaitTime: (Math.random() * 10 + 3).toFixed(1),
          avgProcessTime: (Math.random() * 15 + 5).toFixed(1)
        }
      })
      
      // 窗口统计
      const windowStats = windows.map(window => {
        const totalTickets = Math.floor(Math.random() * 800) + 100
        const finishedTickets = Math.floor(totalTickets * (0.6 + Math.random() * 0.3))
        const abandonedTickets = Math.floor((totalTickets - finishedTickets) * Math.random())
        const completionRate = Math.floor((finishedTickets / totalTickets) * 100)
        
        return {
          id: window.id,
          name: window.name,
          number: window.number,
          totalTickets,
          finishedTickets,
          abandonedTickets,
          completionRate,
          avgWaitTime: (Math.random() * 10 + 3).toFixed(1),
          avgProcessTime: (Math.random() * 15 + 5).toFixed(1)
        }
      })
      
      // 日期统计
      const days = 90 // 生成90天的数据
      const dateStatsRaw = []
      const today = new Date()
      
      for (let i = 0; i < days; i++) {
        const date = new Date()
        date.setDate(today.getDate() - days + i + 1)
        const dateStr = formatDate(date)
        
        const totalTickets = Math.floor(Math.random() * 200) + 50
        const finishedTickets = Math.floor(totalTickets * (0.6 + Math.random() * 0.3))
        const abandonedTickets = Math.floor((totalTickets - finishedTickets) * Math.random())
        const completionRate = Math.floor((finishedTickets / totalTickets) * 100)
        const peakHour = `${Math.floor(Math.random() * 8) + 9}:00`
        
        dateStatsRaw.push({
          date: dateStr,
          totalTickets,
          finishedTickets,
          abandonedTickets,
          completionRate,
          avgWaitTime: (Math.random() * 10 + 3).toFixed(1),
          avgProcessTime: (Math.random() * 15 + 5).toFixed(1),
          peakHour
        })
      }
      
      // 趋势图数据
      const trendData = {
        dates: dateStatsRaw.map(item => item.date),
        totalTickets: dateStatsRaw.map(item => item.totalTickets),
        finishedTickets: dateStatsRaw.map(item => item.finishedTickets),
        abandonedTickets: dateStatsRaw.map(item => item.abandonedTickets)
      }
      
      return {
        summaryData,
        businessTypeStats,
        windowStats,
        dateStatsRaw,
        trendData
      }
    }
    
    // 初始化数据
    const reportData = generateMockReportData()
    const summaryData = reactive(reportData.summaryData)
    const businessTypeStats = ref(reportData.businessTypeStats)
    const windowStats = ref(reportData.windowStats)
    const fullDateStats = ref(reportData.dateStatsRaw)
    const trendData = ref(reportData.trendData)
    
    // 根据日期范围过滤和分页显示日期统计数据
    const dateStats = computed(() => {
      // 过滤日期范围
      let filteredStats = fullDateStats.value.filter(item => {
        const dateInRange = filterForm.dateRange[0] <= item.date && item.date <= filterForm.dateRange[1]
        return dateInRange
      })
      
      // 应用分页
      const start = (pagination.currentPage - 1) * pagination.pageSize
      const end = start + pagination.pageSize
      
      return filteredStats.slice(start, end)
    })
    
    // 添加一个计算属性来计算总数
    const totalFilteredRecords = computed(() => {
      return fullDateStats.value.filter(item => {
        const dateInRange = filterForm.dateRange[0] <= item.date && item.date <= filterForm.dateRange[1]
        return dateInRange
      }).length
    })
    
    // 监听过滤条件和计算属性的变化来更新分页信息
    watch([totalFilteredRecords], () => {
      pagination.total = totalFilteredRecords.value
      pagination.currentPage = 1
    })
    
    // 获取比较数值的样式类
    const getComparisonClass = (value) => {
      if (value > 0) return 'statistic-increase'
      if (value < 0) return 'statistic-decrease'
      return 'statistic-unchanged'
    }
    
    // 处理日期变化
    const handleDateChange = () => {
      handleFilterChange()
    }
    
    // 处理筛选条件变化
    const handleFilterChange = () => {
      pagination.currentPage = 1
      updateChartData()
    }
    
    // 处理搜索
    const handleSearch = () => {
      handleFilterChange()
    }
    
    // 重置过滤器
    const resetFilter = () => {
      filterForm.businessTypeId = null
      filterForm.windowId = null
      const now = new Date()
      const thirtyDaysAgo = new Date()
      thirtyDaysAgo.setDate(now.getDate() - 30)
      filterForm.dateRange = [formatDate(thirtyDaysAgo), formatDate(now)]
      
      handleFilterChange()
    }
    
    // 更新图表数据
    const updateChartData = () => {
      if (!trendChart) return
      
      // 根据日期范围过滤趋势数据
      const startIdx = trendData.value.dates.findIndex(date => date >= filterForm.dateRange[0])
      const endIdx = trendData.value.dates.findIndex(date => date > filterForm.dateRange[1])
      const endIndex = endIdx === -1 ? trendData.value.dates.length : endIdx
      
      const filteredDates = trendData.value.dates.slice(startIdx, endIndex)
      const filteredTotal = trendData.value.totalTickets.slice(startIdx, endIndex)
      const filteredFinished = trendData.value.finishedTickets.slice(startIdx, endIndex)
      const filteredAbandoned = trendData.value.abandonedTickets.slice(startIdx, endIndex)
      
      // 根据时间单位聚合数据
      let aggregatedDates = []
      let aggregatedTotal = []
      let aggregatedFinished = []
      let aggregatedAbandoned = []
      
      if (chartTimeUnit.value === 'day') {
        // 日视图直接使用过滤后的数据
        aggregatedDates = filteredDates
        aggregatedTotal = filteredTotal
        aggregatedFinished = filteredFinished
        aggregatedAbandoned = filteredAbandoned
      } else if (chartTimeUnit.value === 'week') {
        // 周视图聚合
        const weekMap = new Map()
        
        for (let i = 0; i < filteredDates.length; i++) {
          const date = new Date(filteredDates[i])
          const year = date.getFullYear()
          const weekNum = Math.floor((date.getTime() - new Date(year, 0, 1).getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1
          const weekKey = `${year}-W${weekNum}`
          
          if (!weekMap.has(weekKey)) {
            weekMap.set(weekKey, {
              label: weekKey,
              total: 0,
              finished: 0,
              abandoned: 0
            })
          }
          
          const week = weekMap.get(weekKey)
          week.total += filteredTotal[i]
          week.finished += filteredFinished[i]
          week.abandoned += filteredAbandoned[i]
        }
        
        const weeks = Array.from(weekMap.values())
        aggregatedDates = weeks.map(w => w.label)
        aggregatedTotal = weeks.map(w => w.total)
        aggregatedFinished = weeks.map(w => w.finished)
        aggregatedAbandoned = weeks.map(w => w.abandoned)
      } else if (chartTimeUnit.value === 'month') {
        // 月视图聚合
        const monthMap = new Map()
        
        for (let i = 0; i < filteredDates.length; i++) {
          const date = new Date(filteredDates[i])
          const year = date.getFullYear()
          const month = date.getMonth() + 1
          const monthKey = `${year}-${month.toString().padStart(2, '0')}`
          
          if (!monthMap.has(monthKey)) {
            monthMap.set(monthKey, {
              label: monthKey,
              total: 0,
              finished: 0,
              abandoned: 0
            })
          }
          
          const monthData = monthMap.get(monthKey)
          monthData.total += filteredTotal[i]
          monthData.finished += filteredFinished[i]
          monthData.abandoned += filteredAbandoned[i]
        }
        
        const months = Array.from(monthMap.values())
        aggregatedDates = months.map(m => m.label)
        aggregatedTotal = months.map(m => m.total)
        aggregatedFinished = months.map(m => m.finished)
        aggregatedAbandoned = months.map(m => m.abandoned)
      }
      
      // 更新图表
      trendChart.setOption({
        xAxis: {
          data: aggregatedDates
        },
        series: [
          {
            name: '取号数',
            data: aggregatedTotal
          },
          {
            name: '完成数',
            data: aggregatedFinished
          },
          {
            name: '放弃数',
            data: aggregatedAbandoned
          }
        ]
      })
    }
    
    // 处理图表时间单位变化
    const handleChartUnitChange = () => {
      updateChartData()
    }
    
    // 初始化趋势图
    const initTrendChart = () => {
      trendChart = echarts.init(document.getElementById('trend-chart'))
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['取号数', '完成数', '放弃数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: trendData.value.dates,
          axisLabel: {
            rotate: 45,
            interval: 'auto'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '取号数',
            type: 'line',
            data: trendData.value.totalTickets,
            smooth: true,
            lineStyle: {
              width: 3
            }
          },
          {
            name: '完成数',
            type: 'line',
            data: trendData.value.finishedTickets,
            smooth: true,
            lineStyle: {
              width: 3
            }
          },
          {
            name: '放弃数',
            type: 'line',
            data: trendData.value.abandonedTickets,
            smooth: true,
            lineStyle: {
              width: 3
            }
          }
        ]
      }
      
      trendChart.setOption(option)
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        trendChart.resize()
      })
    }
    
    // 刷新数据
    const refreshData = () => {
      loading.value = true
      
      // 模拟加载
      setTimeout(() => {
        // 生成新的模拟数据
        const newReportData = generateMockReportData()
        
        // 更新数据
        Object.assign(summaryData, newReportData.summaryData)
        businessTypeStats.value = newReportData.businessTypeStats
        windowStats.value = newReportData.windowStats
        fullDateStats.value = newReportData.dateStatsRaw
        trendData.value = newReportData.trendData
        
        // 更新图表
        updateChartData()
        
        loading.value = false
        ElMessage.success('数据已刷新')
      }, 800)
    }
    
    // 导出Excel
    const exportExcel = () => {
      ElMessage.success('数据已导出到Excel文件')
    }
    
    // 处理页面大小变化
    const handleSizeChange = (size) => {
      pagination.pageSize = size
    }
    
    // 处理页码变化
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }
    
    // 组件挂载后初始化图表
    onMounted(() => {
      initTrendChart()
      updateChartData()
    })
    
    return {
      loading,
      activeTab,
      chartTimeUnit,
      filterForm,
      dateShortcuts,
      businessTypes,
      windows,
      summaryData,
      businessTypeStats,
      windowStats,
      dateStats,
      pagination,
      disableFutureDate,
      getComparisonClass,
      handleDateChange,
      handleFilterChange,
      handleSearch,
      resetFilter,
      handleChartUnitChange,
      refreshData,
      exportExcel,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.statistics-report-container {
  padding: 15px 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: 500;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.filter-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}

.statistics-cards {
  margin-bottom: 20px;
}

.statistic-card {
  height: 120px;
}

.card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 16px;
}

.statistic-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.statistic-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.statistic-comparison {
  font-size: 14px;
}

.statistic-increase {
  color: #67C23A;
}

.statistic-decrease {
  color: #F56C6C;
}

.statistic-unchanged {
  color: #909399;
}

.data-container {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 350px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-tabs {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>